import React from 'react';
import { Link } from 'react-router';
import { Breadcrumb, Icon, Button, Modal, Form, Input, Upload, message, Radio, Checkbox, Select, Cascader, TreeSelect } from 'antd';
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
import { EditorState, convertToRaw, convertFromRaw, ContentState } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
import { Editor } from 'react-draft-wysiwyg';
import htmlToDraft from 'html-to-draftjs';
import '../../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import './allgoods.less';
import $ from 'jquery';
import Config from '../../common/config';
import SKGoodsList from './SKGoodsList';
import area from '../../common/city'

const config = new Config();
const FormItem = Form.Item;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const InputGroup = Input.Group;
const token = sessionStorage.getItem('token')


class GoodsForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            productvisible: false, //选择新发布的商品的对话框
            fileList1: [], //上传的商品主图
            fileList5: [], //商品详情页用的5张图片
            tagList: [], //商品标签列表
            productData: {}, //编辑的商品详情
            addProduct: {}, //选择发布的商品
            editorState: EditorState.createEmpty(), //商品说明书编辑器状态
            editorIntro: EditorState.createEmpty(), //商品介绍编辑器状态
            imageFile: '', //图片数据
            html: '', //编辑预览的文本
            visible: false, //预览模态框的显示状态
            brandList: [],   //品牌列表
            area: [],//地区列表
            areaValue: [""],
        };
        this.hideModal = this.hideModal.bind(this);
    }
    componentDidMount() {
        for (var i = 0, arr = []; i < area.length; i++) {
            if (i < 31) {
                let val = area[i];
                arr.push({
                    label: val.name,
                    value: val.name,
                    key: val.name,
                })
            }
        }
        this.setState({
            area: [{ label: '全国', value: 'all', key: 'all', children: arr, }],
        });
        this.getBrandListData();
        this.getProductTagList();
        this.getProductData(this.props.params.productid);
        //富文本编辑器图片上传
        $('.rdw-image-wrapper .rdw-option-wrapper').click(
            (e) => {
                //e.stopPropagation();
                $('#xFile').trigger('click');
                $('.rdw-image-modal').focus();

                // $('.rdw-image-modal-url-input').onkeypress(
                //     (editor) => {
                //         console.log(e.key);
                //     }
                // );
            }
        );
    }


    onChangeTree(areaValue) {
        console.log('onChange ', areaValue);
        this.setState({ areaValue });

    }
    //获取商品详情
    getProductData(productid) {
        if (productid != "0") {
            $.ajax({
                url: `${config.JuseProduct}/products/detail`,
                type: 'get',
                headers: {
                    'Authorization': 'Bearer ' + token,
                },
                data: {
                    productId: productid
                },
                success: res => {
                    console.log('获取商品详情', res)
                    if (res.code === 200) {
                        const productData = res.data
                        const instructions = ContentState.createFromBlockArray(htmlToDraft(productData.instructions || '<p></p>'))
                        const introduce = ContentState.createFromBlockArray(htmlToDraft(productData.introduce || '<p></p>'))
                        const editorState = EditorState.createWithContent(instructions)
                        const editorIntro = EditorState.createWithContent(introduce)
                        const { fileList1, fileList5 } = this.state;
                        fileList1.push({
                            uid: -1,
                            name: productData.listImage,
                            status: 'done',
                            url: productData.imageUrl + productData.listImage,
                            thumbUrl: productData.imageUrl + productData.listImage,
                        });
                        for (let val of [1, 2, 3, 4, 5]) {
                            if (productData["detailImage" + val]) {
                                fileList5.push({
                                    uid: -val,
                                    name: productData["detailImage" + val],
                                    status: 'done',
                                    url: productData.imageUrl + productData["detailImage" + val],
                                    thumbUrl: productData.imageUrl + productData["detailImage" + val],
                                });
                            }
                        }
                        this.props.form.setFieldsValue({
                            productnumber: productData.productId,
                            costprice: productData.cost,
                            productname: productData.productName,
                            retailprice: productData.retailp,
                            salestatus: productData.saleStatus,
                            commodityPromotion:productData.commodityPromotion,
                            // isfreeshipping: productData.isfreeshipping == 1 ? true : false,
                            marketprice: productData.marketPrice,
                            purchaselimit: productData.buyLimit,
                            goodsort: productData.goodsort,
                            categoryname: productData.category.categoryRename || productData.category.categoryName,
                            tagId: productData.tagId,
                            ProductImg: fileList1,
                            Filedata: fileList5,
                            brandId: productData.brandId
                        });
                        console.log(res.data.marketableArea)
                        this.setState({
                            fileList1,
                            fileList5,
                            productData,
                            editorState,
                            editorIntro,
                            areaValue: res.data.marketableArea ? res.data.marketableArea.split(",") : [""],
                        });
                    }
                }
            })
        } else {
            this.props.form.resetFields();
            this.setState({
                fileList1: [],
                fileList5: [],
                productData: {},
            });
        }
    }
    //商品标签列表
    getProductTagList() {
        $.ajax({
            url: `${config.JuseProduct}/tags/allUse`,
            type: "post",
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            success: res => {
                if (res.code === 200) {
                    console.log('商品标签列表', res.data)
                    this.setState({
                        tagList: res.data
                    })
                } else {
                    message.error('商品标签列表加载失败，请返回重新操作', 2);
                }
            }
        });
    }

    getBrandListData() {
        $.ajax({
            url: `${config.JuseProduct}/brand/list`,
            type: "get",
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
                pageSize: 5000,
                page: 1,
                beactive: 'Y'
            },
            success: res => {
                if (res.code === 200) {
                    console.log('品牌列表', res.data.rows)
                    this.setState({
                        brandList: res.data.rows
                    })
                } else {
                    message.error('品牌列表加载失败，请返回重新操作', 2);
                }
            }
        });
    }
    //选择未发布药品
    selectProduct() {
        this.setState({
            productvisible: true,
        })
    }
    //确认添加商品
    addProduct(product) {
        const form = this.props.form;
        form.setFieldsValue({
            productnumber: product.productId,
            costprice: product.cost,
            productname: product.productName,
            retailprice: product.retailp,
            categoryname: product.category.categoryRename || product.category.categoryName,
        })
        this.setState({
            productvisible: false,
            addProduct: product,
        })
    }
    //取消添加商品
    cancelProduct() {
        this.setState({
            productvisible: false
        })
    }

    //限制用户必须上传图片格式的文件、图片大小
    beforeUpload(file, fileList) {
        let isIMG = file.type.indexOf('image') != -1;
        if (!isIMG) {
            message.config({ top: 50 });
            message.error('您只能上传图片！');
        }
        let isLt10M = file.size / 1024 / 1024 < 10;
        if (!isLt10M) {
            message.config({ top: 50 });
            message.error('您上传的图片大小必须小于10MB！');
        }
        return isIMG && isLt10M;
    }
    //上传图片
    normFile1(e) {
        this.setState({
            fileList1: e.fileList
        });
        if (Array.isArray(e)) {
            return e;
        }
        return e && e.fileList;
    };
    //上传图片
    normFile5(e) {
        this.setState({
            fileList5: e.fileList
        });
        if (Array.isArray(e)) {
            return e;
        }
        return e && e.fileList;
    };

    //保存商品信息
    saveGoods() {
        const form = this.props.form;
        const { tagList, fileList1, fileList5, addProduct } = this.state;
        //商品说明书
        const instructions = draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()));
        //商品详情介绍
        const introduce = draftToHtml(convertToRaw(this.state.editorIntro.getCurrentContent()));
        form.validateFields((err, values) => {
            if (!err) {
                if (fileList5.length == 0) {
                    message.error('请上传商品详情页展示图片！', 2);
                    return;
                }
                if (fileList5.length > 5) {
                    message.error('请上传最多5张商品详情页展示图片！', 2);
                    return;
                }
                const data = {
                    productId: this.props.params.productid !== '0' ? this.props.params.productid : addProduct.productId,//商品id
                    marketPrice: values.marketprice,
                    buyLimit: values.purchaselimit,
                    tagId: values.tagId || [],
                    imageUrl: config.Filepath,
                    listImage: values.ProductImg[0].response ? values.ProductImg[0].response.name : values.ProductImg[0].name,
                    detailImage1: values.Filedata[0].response ? values.Filedata[0].response.name : values.Filedata[0].name,
                    detailImage2: values.Filedata[1] ? (values.Filedata[1].response ? values.Filedata[1].response.name : values.Filedata[1].name) : '',
                    detailImage3: values.Filedata[2] ? (values.Filedata[2].response ? values.Filedata[2].response.name : values.Filedata[2].name) : '',
                    detailImage4: values.Filedata[3] ? (values.Filedata[3].response ? values.Filedata[3].response.name : values.Filedata[3].name) : '',
                    detailImage5: values.Filedata[4] ? (values.Filedata[4].response ? values.Filedata[4].response.name : values.Filedata[4].name) : '',
                    saleStatus: values.salestatus,
                    commodityPromotion:values.commodityPromotion,
                    instructions,
                    introduce,
                    productSort: values.goodsort,
                    brandId: values.brandId,
                    marketableArea: this.state.areaValue.join(","),
                }
                console.log('data', values);
                $.ajax({
                    url: `${config.JuseProduct}/products/publish`,
                    type: "post",
                    headers: {
                        'Authorization': 'Bearer ' + token,
                    },
                    data: data,
                    success: res => {
                        console.log(res)
                        if (res.code === 200) {
                            message.success('保存商品信息成功', 2);
                            if (this.props.params.productid != 0) {
                                window.history.go(-1);
                            } else {
                                form.resetFields()

                                this.setState({
                                    editorIntro: '',
                                    editorState: '',
                                    fileList1: [],
                                    fileList5: [],
                                    areaValue: [""],
                                }, () => {
                                    this.props.form.setFieldsValue({
                                        ProductImg: [],
                                        Filedata: []
                                    });
                                })
                            }



                        } else {
                            message.error(res.mes, 2)
                        }
                    }
                });
            } else {
                message.error('请填写必填的信息，再保存！', 2);
            }
        })
    }

    //富文本编辑器编辑改变内容函数
    onEditorStateChange(editorState) {
        this.setState({ editorState })
    }
    onEditorIntroChange(editorIntro) {
        this.setState({ editorIntro })
    }
    //富文本编辑器图片上传
    upload(e) {
        // const formData = new FormData(); //创建一个form表单对象
        // formData.append('Filedata', e.target.files[0]); //表单对象压入图片
        // if (e.target.files.length) {

        //     const xhr = new XMLHttpRequest();
        //     xhr.open('POST', config.UploadFile + '/uploadproductimg');
        //     xhr.send(formData);
        //     xhr.addEventListener('load', () => {
        //         const response = JSON.parse(xhr.responseText);
        //         if (response.code == 200) {
        //             this.setState({
        //                 imageFile: response.name
        //             }, () => {
        //                 $('.rdw-image-modal-url-input')[0].value = config.Filepath + response.name;
        //                 $('.rdw-image-modal-size .rdw-image-modal-size-input')[1].value = '100%';
        //                 $('.rdw-image-modal-url-input').focus();
        //                 $('.rdw-image-modal-url-input').blur();
        //             });
        //         }
        //     });
        //     xhr.addEventListener('error', () => {
        //         const error = JSON.parse(xhr.responseText);
        //     });
        // }
        console.log(e)
        console.log('上传图片')
        const formData = new FormData(); //创建一个form表单对象
        formData.append('Filedata', e); //表单对象压入图片

        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.open('POST', config.UploadFile + '/uploadproductimg');
            xhr.send(formData);
            xhr.addEventListener('load', () => {
                const response = JSON.parse(xhr.responseText);
                if (response.code == 200) {
                    console.log(response)
                    // this.setState({
                    //   imageFile: response.name
                    // }, () => {
                    //   // $('.rdw-image-modal-url-input')[0].value = config.Filepath + response.name;
                    //   // $('.rdw-image-modal-size .rdw-image-modal-size-input')[1].value = '100%';
                    //   // $('.rdw-image-modal-url-input').focus();
                    //   // $('.rdw-image-modal-url-input').blur();
                    // });
                    resolve({ data: { link: config.Filepath + response.name } })
                }
            });
            xhr.addEventListener('error', () => {
                const error = JSON.parse(xhr.responseText);
                reject(error)
            });
        })

    }
    //编辑器预览功能
    previewEditor(key) {
        //key=0 为说明书预览，key=1为介绍预览
        let html = '';
        if (key == 0) {
            html = draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()));
        } else {
            html = draftToHtml(convertToRaw(this.state.editorIntro.getCurrentContent()));
        }
        this.setState({
            visible: true,
        }, () => {
            $('#preview').html(html)
        })

    }
    //隐藏预览模态框
    hideModal() {
        this.setState({
            visible: false,
        })
    }

    // 验证价格
    // validatePrice(e) {
    //     if (e.target.value && costprice) {
    //         const form = this.props.form
    //         const costprice = form.getFieldValue('costprice')
    //         if (Number(e.target.value) < Number(costprice)) {
    //             form.setFields({ marketprice: { value: e.target.value, errors: ['谷医堂价不能小于成本价格'] } })
    //         }
    //     }
    // }

    handleChange(value) {
        console.log(`selected ${value}`);
    }

    handleBlur() {
        console.log('blur');
    }

    handleFocus() {
        console.log('focus');
    }

    render() {
        const { productid } = this.props.params;
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 18 }, };
        const formItemLayout2 = { labelCol: { span: 2 }, wrapperCol: { span: 22 }, };
        const options = this.state.tagList.map((val, i) => {
            return <Option key={val.tagId} value={String(val.tagId)}>{val.tagName}</Option>
        });
        const brandOptions = this.state.brandList.map(item => {
            return <Option key={item.brandId} value={String(item.brandId)}>{item.brandName}</Option>
        })
        const { editorState } = this.state.editorState;
        return (
            <Form>
                <div className='goods-label'>
                    <div className='goods-label-cont clearfix'>
                        <div className='goods-label-cont-nav clearfix'>
                            <Breadcrumb separator=">">
                                <Breadcrumb.Item>首页管理</Breadcrumb.Item>
                                <Breadcrumb.Item>全部商品管理</Breadcrumb.Item>
                                <Breadcrumb.Item>发布新商品</Breadcrumb.Item>
                            </Breadcrumb>
                        </div>
                        <div style={{ overflow: 'hidden', marginLeft: '15px' }}>
                            <Button style={{ marginRight: '1%' }} className="floor-savebtn" onClick={() => window.location.hash = '/allgoods'}>返回</Button>
                            <Button style={{ marginRight: '1%' }} className="floor-savebtn" onClick={() => this.saveGoods()}>保存</Button>
                        </div>
                        <div className='clearfix'>
                            <div className="goodsdetail-form" style={{ width: "35%", height: '540px' }}>
                                <div className="goodsdetail-form-basic">
                                    <p className="goodsdetail-form-title">基本信息</p>
                                    {
                                        productid != "0" ?
                                            <FormItem style={{ minHeight: '50px', marginBottom: 10, marginRight: "4%", width: "48%", display: "inline-block", }}>
                                                {getFieldDecorator('productnumber')(
                                                    <Input addonBefore="药品内码" disabled />
                                                )}
                                            </FormItem>
                                            :
                                            <FormItem style={{ minHeight: '50px', marginBottom: 10, marginRight: "4%", width: "48%", display: "inline-block", }}>
                                                {getFieldDecorator('productnumber', {
                                                    rules: [{ required: true, message: '请选择药品' }]
                                                })(
                                                    <Input addonBefore="药品内码" placeholder="请点击选择药品" readOnly onClick={() => this.selectProduct()} />
                                                )}
                                            </FormItem>
                                    }
                                    <FormItem style={{ minHeight: '50px', marginBottom: 10, width: "48%", display: "inline-block", }}>
                                        {getFieldDecorator('costprice', {

                                        })(
                                            <Input addonBefore="成本价格" disabled />
                                        )}
                                    </FormItem>
                                    <FormItem style={{ minHeight: '50px', marginBottom: 10, marginRight: "4%", width: "48%", display: "inline-block", }}>
                                        {getFieldDecorator('productname', {

                                        })(
                                            <Input addonBefore="药品名称" disabled />
                                        )}
                                    </FormItem>
                                    <FormItem style={{ minHeight: '50px', marginBottom: 10, width: "48%", display: "inline-block", }}>
                                        {getFieldDecorator('retailprice', {

                                        })(
                                            <Input addonBefore="零售价格" disabled />
                                        )}
                                    </FormItem>
                                </div>
                                <div className="goodsdetail-form-set">
                                    <p className="goodsdetail-form-title">相关设置</p>
                                    <FormItem {...formItemLayout} label="商品销售状态" style={{ minHeight: '50px', marginBottom: 0, marginTop: 10 }}>
                                        {getFieldDecorator('salestatus', {
                                            initialValue: 1,
                                        })(
                                            <RadioGroup>
                                                <Radio value={1}>上架区</Radio>
                                                <Radio value={2}>下架区</Radio>
                                            </RadioGroup>
                                        )}
                                    </FormItem>
                                    <FormItem
                                        {...formItemLayout}
                                        label="品牌"
                                        style={{ minHeight: '50px', marginBottom: 0, marginTop: 10 }}
                                    >
                                        {getFieldDecorator('brandId', {
                                            initialValue: '',
                                        })(
                                            <Select placeholder="请选择/搜索"
                                                showSearch
                                                style={{ width: 200 }}
                                                optionFilterProp="children"
                                                filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                            >
                                                <Option value="">无</Option>
                                                {brandOptions}
                                            </Select>
                                        )}
                                    </FormItem>
                                    <FormItem {...formItemLayout} label="商品推广词" style={{ minHeight: '50px', marginBottom: 0, marginTop: 10 }}>
                                        {getFieldDecorator('commodityPromotion',{
                                             rules: [{ max: 10, message: '请输入10个字符以内' }],
                                        })(
                                            <Input />
                                        )}
                                    </FormItem>
                                    {/* <FormItem {...formItemLayout} label="是否包邮" style={{ minHeight: '50px', marginBottom: 0 }}>
                                        {getFieldDecorator('isfreeshipping', {
                                            initialValue: false,
                                            valuePropName: 'checked',
                                        })(
                                            <Checkbox>包邮</Checkbox>
                                            )}
                                    </FormItem> */}
                                </div>
                            </div>
                            <div className="goodsdetail-form" style={{ width: "61%", height: '540px' }}>
                                <p className="goodsdetail-form-title">销售属性</p>
                                <FormItem style={{ minHeight: '50px', marginBottom: 10, marginRight: "2%", width: "40%", display: "inline-block", }}>
                                    {getFieldDecorator('marketprice', {
                                        rules: [{ required: true, message: '请输入谷医堂价' }]
                                    })(
                                        <Input addonBefore="谷医堂价" />
                                    )}
                                </FormItem>
                                {
                                    productid != "0" ?
                                        <Button style={{ width: "16%", marginRight: "2%", }}><Link to={'/goodsHistoricalPrice/' + productid}>查看历史价格</Link></Button>
                                        : ""
                                }
                                <FormItem style={{ minHeight: '50px', marginBottom: 10, width: "40%", display: "inline-block", }}>
                                    {getFieldDecorator('purchaselimit', {
                                        initialValue: "",
                                    })(
                                        <Input addonBefore="购买限制" />
                                    )}
                                </FormItem>
                                <FormItem style={{ minHeight: '50px', marginBottom: 10, marginRight: "4%", width: "48%", display: "inline-block", }}>
                                    {getFieldDecorator('goodsort', {
                                        initialValue: "",
                                    })(
                                        <Input addonBefore="商品排序" />
                                    )}
                                </FormItem>
                                <FormItem style={{ minHeight: '50px', marginBottom: 10, width: "48%", display: "inline-block", }}>
                                    {getFieldDecorator('categoryname', {
                                    })(
                                        <Input addonBefore="所属商品分类" disabled />
                                    )}
                                </FormItem>
                                <FormItem {...formItemLayout2} label="标记标签" style={{ minHeight: '50px', marginBottom: 10, }}>
                                    {getFieldDecorator('tagId', {
                                        rules: [{ type: 'array' }],
                                        initialValue: [],
                                    })(
                                        <Select
                                            mode="multiple"
                                            placeholder="请选择/请输入匹配"
                                        >
                                            {options}
                                        </Select>
                                    )}
                                </FormItem>
                                <FormItem label="商品图片(商品列表展示一张)" style={{ minHeight: '120px', marginBottom: 0, marginRight: "5%", width: "23%", display: "inline-block", }}>
                                    {getFieldDecorator('ProductImg', {
                                        valuePropName: 'fileList1', getValueFromEvent: this.normFile1.bind(this),
                                        rules: [{ required: true, message: '请上传商品图片！' }],
                                    })(
                                        <Upload
                                            accept="image/*"
                                            name="ProductImg"
                                            action={config.UploadFile + "/uploadproductimg"}
                                            beforeUpload={this.beforeUpload.bind(this)}
                                            listType="picture"
                                            className="upload-list-inline onepicture"
                                            fileList={this.state.fileList1}
                                        >
                                            {
                                                this.state.fileList1.length >= 1 ? null :
                                                    <Button><Icon type="upload" /> 上传图片</Button>
                                            }
                                        </Upload>
                                    )}
                                </FormItem>
                                <FormItem label="商品图片(商品详情页展示最多5张)" style={{ minHeight: '108px', marginBottom: 0, width: "72%", display: "inline-block" }}>
                                    {getFieldDecorator('Filedata', {
                                        valuePropName: 'fileList5', getValueFromEvent: this.normFile5.bind(this),
                                        rules: [{ required: true, message: '请上传商品图片！' }],
                                    })(
                                        <Upload
                                            accept="image/*"
                                            name="Filedata"
                                            action={config.UploadFile + "/uploadproductimg"}
                                            beforeUpload={this.beforeUpload.bind(this)}
                                            listType="picture"
                                            multiple={true}
                                            className="upload-list-inline fivepicture"
                                            fileList={this.state.fileList5}
                                        >
                                            {
                                                this.state.fileList5.length >= 5 ? null :
                                                    <Button><Icon type="upload" /> 上传图片</Button>
                                            }
                                        </Upload>
                                    )}
                                </FormItem>

                                <FormItem
                                    {...formItemLayout2}
                                    label="销售区域"
                                    style={{ minHeight: '50px', marginBottom: 0, marginTop: 10 }}
                                >

                                    <TreeSelect
                                        treeData={this.state.area}
                                        value={this.state.areaValue}
                                        onChange={(value) => this.onChangeTree(value)}
                                        treeCheckable={true}
                                        showCheckedStrategy={SHOW_PARENT}
                                        searchPlaceholder={'请选择销售区域'}
                                        style={{ zIndex: 1000 }}
                                    />


                                </FormItem>
                            </div>

                            <div className="goodsdetail-form" >
                                <p className="goodsdetail-form-title">商品说明书 {/*<Button style={{ float: 'right' }} onClick={this.previewEditor.bind(this, 0)}>预览</Button>*/}</p>
                                <Editor
                                    editorState={this.state.editorState}
                                    wrapperClassName="demo-wrapper"
                                    editorClassName="demo-editor"
                                    onEditorStateChange={this.onEditorStateChange.bind(this)}
                                    toolbar={{
                                        //inline: { inDropdown: true },
                                        //list: { inDropdown: true },
                                        textAlign: { inDropdown: true },
                                        link: { inDropdown: true },
                                        image: {
                                            uploadCallback: this.upload.bind(this),
                                            //     alt: { present: true, mandatory: true }
                                            defaultSize: {
                                                height: 'auto',
                                                width: '100%',
                                            },
                                        }
                                    }}
                                    localization={{
                                        locale: 'zh'
                                    }}
                                />
                            </div>
                            <div className="goodsdetail-form">
                                <p className="goodsdetail-form-title">商品介绍{/*<Button style={{ float: 'right' }} onClick={this.previewEditor.bind(this, 1)}>预览</Button>*/}</p>
                                <Editor
                                    editorState={this.state.editorIntro}
                                    wrapperClassName="demo-wrapper"
                                    editorClassName="demo-editor"
                                    onEditorStateChange={this.onEditorIntroChange.bind(this)}
                                    toolbar={{
                                        //inline: { inDropdown: true },
                                        //list: { inDropdown: true },
                                        textAlign: { inDropdown: true },
                                        link: { inDropdown: true },
                                        image: {
                                            uploadCallback: this.upload.bind(this),
                                            //     alt: { present: true, mandatory: true }
                                            defaultSize: {
                                                height: 'auto',
                                                width: '100%',
                                            },
                                        }
                                    }}
                                    localization={{
                                        locale: 'zh'
                                    }}
                                />
                            </div>
                        </div>
                        {/* <input
                            type="file"
                            id="xFile"
                            name="xFile"
                            style={{ position: 'absolute', opacity: 0 }}
                            onChange={this.upload.bind(this)}
                        /> */}
                    </div>
                    <SKGoodsList
                        visible={this.state.productvisible}
                        addProduct={this.addProduct.bind(this)}
                        cancelProduct={this.cancelProduct.bind(this)}
                    />
                </div>
                <Modal
                    visible={this.state.visible}
                    title='预览'
                    onOk={this.hideModal}
                    onCancel={this.hideModal}
                    width='1000'
                    className='previewModal'
                >
                    <div id='preview'></div>
                </Modal>
            </Form>
        )
    }
}

const GoodsDetail = Form.create()(GoodsForm);
export default GoodsDetail;
